import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Modal, Upload, Icon } from 'antd'

export default class extends Component {
    static propTypes = {
        visible: PropTypes.bool,
        onOk: PropTypes.func,
        onCancel: PropTypes.func
    }
    constructor(props) {
        super(props)
        this.state = {
            previewVisible: false,
            previewImage: '',
            fileList: [{
                uid: -1,
                name: 'xxx.png',
                status: 'done',
                url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            }],
        }
    }

    handleCancel = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
        this.setState({
            previewImage: file.url || file.thumbUrl,
            previewVisible: true,
        });
    }

    handleChange = ({ fileList }) => {
        console.log('handle it.. haha ', fileList)
        this.setState({ fileList })
    }

    render() {
        const { visible, onOk, onCancel } = this.props;
        const { previewVisible, previewImage, fileList } = this.state;
        const uploadButton = (
            <div>
                <Icon type="plus" />
                <div className="ant-upload-text"></div>
                <style>
                    {`
                    .ant-upload-select-picture-card i {
                      font-size: 32px;
                      color: #999;
                    }

                    .ant-upload-select-picture-card .ant-upload-text {
                      margin-top: 8px;
                      color: #666;
                    }
                `}
                </style>
            </div>
        )
        return (
            <div>
                <Modal
                    closable={false}
                    title=""
                    visible={visible}
                    onOk={onOk}
                    onCancel={onCancel}
                >
                    <Upload
                        action="https://ant.design/jsonplaceholder.typicode.com/posts/"
                        listType="picture"
                        fileList={fileList}
                        onPreview={this.handlePreview}
                        onChange={this.handleChange}
                    >
                        {fileList.length >= 1 ? null : uploadButton}
                    </Upload>

                    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                        <div>
                            <img style={{width: '100%'}} src={previewImage}/>
                        </div>
                    </Modal>
                </Modal>
            </div>
        )
    }
}

const style = {

}
